<template>
  <div class="">
    <navs :isDark="true"></navs>
    <div class="listbox">
      <van-tabs v-model="activeTab" sticky>
        <van-tab :title="$t('list.teamMintRewardRecord')" name="team" />
        <van-tab :title="$t('list.shareMintRewardRecord')" name="invite" />
      </van-tabs>

      <!-- 团队记录 -->
      <div class="helistbox" v-if="activeTab == 'team'">
        <div class="helistlist">
          <div class="flex-cc header">
            <div>{{ $t("list.reward") }}</div>
            <div>{{ $t("list.time") }}</div>
          </div>
          <div
            v-for="(item, index) in teamRecords"
            :key="'team-' + index"
            class="record-item"
          >
            <div class="flex-cc">
              <div class="num">{{ item.reward }}</div>
              <div>{{ formatTime(item.claimLpTs) }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 分享记录 -->
      <div class="helistbox" v-if="activeTab == 'invite'">
        <div class="helistlist">
          <div class="flex-cc header">
            <div>{{ $t("list.reward") }}</div>
            <div>{{ $t("list.time") }}</div>
          </div>
          <div
            v-for="(item, index) in inviteRecords"
            :key="'invite-' + index"
            class="record-item"
          >
            <div class="flex-cc">
              <div class="num">{{ item.reward }}</div>
              <div>{{ formatTime(item.claimLpTs) }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <foot></foot> -->
  </div>
</template>

<script>
import navs from "../components/nav.vue";
import foot from "./components/foot.vue";
import { AIMEMainContract, web3 } from "@/assets/js/web3.js";
import { Toast } from "vant";

export default {
  components: {
    navs,
    foot,
  },
  data() {
    return {
      activeTab: "team", // 默认显示团队记录
      teamRecords: [],
      inviteRecords: [],
      leaderAddress: "",
      currentAccount: "",
    };
  },
  async mounted() {
    this.currentAccount = sessionStorage.getItem("account") || "";
    // this.currentAccount = "0xeC60Ed8dB3bDc19A140215de4854a0E1B0D0aB57";
    this.leaderAddress = sessionStorage.getItem("leaderAddress") || "";
    await this.loadRewardRecords();
  },
  methods: {
    formatTime(ts) {
      const d = new Date(ts * 1000);
      return `${d.getFullYear()}-${(d.getMonth() + 1)
        .toString()
        .padStart(2, "0")}-${d
        .getDate()
        .toString()
        .padStart(2, "0")} ${d
        .getHours()
        .toString()
        .padStart(2, "0")}:${d
        .getMinutes()
        .toString()
        .padStart(2, "0")}`;
    },
    async loadRewardRecords() {
      try {
        let team = await AIMEMainContract.methods
          .getTeamRewardRecords(this.currentAccount)
          .call();
        let invite = await AIMEMainContract.methods
          .getInviteRewardRecords(this.currentAccount)
          .call();

        // 转换 reward 单位
        this.teamRecords = team.map((item) => ({
          ...item,
          reward: Number(web3.utils.fromWei(item.reward, "ether")).toFixed(2),
        }));
        console.log(this.inviteRecords);
        this.inviteRecords = invite.map((item) => ({
          ...item,
          reward: Number(web3.utils.fromWei(item.reward, "ether")).toFixed(2),
        }));
        console.log(this.inviteRecords);
      } catch (err) {
        console.error("获取奖励记录失败", err);
        Toast.fail(this.$t("common.requestFail"));
      }
    },
  },
};
</script>

<style lang="less" scoped>
.listbox {
  padding: 66px 36px;
  background: #121212;
  min-height: 100vh;
}
.helistbox {
  padding: 0 0 64px;
  color: #ededed;

  .title {
    font-size: 48px;
    color: #ededed;
    margin-bottom: 64px;
  }
  .helistlist {
    border-radius: 16px;
    border: 2px solid #212121;
    padding: 50px 0;
  }
  .flex-cc {
    display: flex;
    justify-content: space-between;
    padding: 0 36px;

    > div {
      flex: 1;
      text-align: center;
      margin-bottom: 28px;
    }

    .num {
      color: #bdee63;
    }
  }
}
/deep/ .van-tabs__nav {
  background: transparent;
}
.van-tabs /deep/ .van-tabs__wrap {
  // padding: 0 20px;
  border-bottom: none;
}
.van-tabs /deep/ .van-tab {
  font-weight: 500;
  color: #888;
}
.van-tabs /deep/ .van-tab--active {
  color: #bdee63;
  font-weight: 700;
}
.van-tabs /deep/ .van-tabs__line {
  width: 70px;
  height: 4px;
  background-color: #bdee63;
  border-radius: 2px;
}
</style>
